import React, { Component } from 'react'

export class titlehed extends Component {
   
  render() {
    const {list,tab,del,add,active}=this.props
    return (
      <div className='tabhead'>{list.map((item,index)=>{
          return <p> <span onClick={()=>{
              tab(index)
          }}
          
          className={active===index ? 'on' :''}>{item.title} </span> <span onClick={
              ()=>{
                  del(item.id)
              }

          }>x</span></p>

      })}
      <button onClick={
          ()=>{
              add()

          }
      }>+</button></div>
    )
  }
}

export default titlehed